<template>
	<view class="">
		<!-- banner区 -->
		<view class="banner">
			<image :src="topimg" mode=""></image>
		</view>
		<!-- 分类 -->
		<view class="mainpadding allneir">
			<view class=" flexbetween">
				<view class="" @click="tzbzht">
					<view class="flicon">
						<image src="../../static/image/system/bzht.png" mode=""></image>
					</view>
					<view class="smalltext margin_top textcenter" >标准合同</view>
				</view>
				<!-- <view class="" @click="tzfljs">
					<view class="flicon">
						<image src="../../static/image/system/fljs.png" mode=""></image>
					</view>
					<view class="smalltext margin_top textcenter">法律计算</view>
				</view> -->
				<view class="" @click="tzsspg">
					<view class="flicon">
						<image src="../../static/image/system/sspg.png" mode=""></image>
					</view>
					<view class="smalltext margin_top textcenter">诉讼评估</view>
				</view>
				<view class="" @click="tzflws">
					<view class="flicon">
						<image src="../../static/image/system/flws.png" mode=""></image>
					</view>
					<view class="smalltext margin_top textcenter">法律文书</view>
				</view>
				
				<view class="" @click="tzflfg">
					<view class="flicon">
						<image src="../../static/image/system/flfg.png" mode=""></image>
					</view>
					<view class="smalltext margin_top textcenter">法律法规</view>
				</view>
			</view>
			<!-- banner区 -->
			<view class=" margin_top">
				<u-swiper :list="list1" indicator circular @click="lbtclick"></u-swiper>
			</view>
			<!-- 公告 -->
			<view class="margin_top">
				<u-notice-bar :text="text1" direction="column" @click="enternews($event)"></u-notice-bar>
			</view>
			<!-- 常用工具 -->
			<view class="cygjbox radius margin_top mainpadding">
				<view class="flexbetween" @click="tzcygj">
					<view class="flexleft">
						<view class="line margin_right1"></view>
						<view class="sytitlle">常用工具</view>
					</view>
					<view class="nostrongtext flexleft">查看更多<u-icon name="arrow-right" color="#333" size="12"></u-icon>
					</view>
				</view>
				<view class="flexleft flex_wrap margin_top" style="align-items: flex-start;">
					<view class="flexcolumn" style="width: 25%;" @click="yizygy(item)" v-for="item in cygj_list" :key="item.id">
						<view class="gjicon">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="nosmalltext textcenter margin_top2">{{item.name}}</view>
					</view>
				</view>
			</view>
			<!-- 法律讲堂 -->
			<view class="ffffff mainpadding radius margin_top">
				<view class="flexbetween"  @click="tzfljt">
					<view class="flexleft">
						<view class="line1 margin_right1"></view>
						<view class="fltitlle">法律讲堂</view>
					</view>
					<view class="nostrongtext flexleft">查看更多<u-icon name="arrow-right" color="#333" size="12"></u-icon>
					</view>
				</view>
				<view class="flexleft flex_wrap" style="align-items: flex-start;">
					<view class="ershiw flexcenter margin_top" v-for="item in fljtrec_data" :key="item.id" @click="trzxq(item)">
						<view class="">
							<view class="flimg">
								<image :src="item.image_text" mode=""></image>
							</view>
							<view class="nosmalltext textcenter margin_top1">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 专业服务 -->
			<view class="zybox margin_top mainpadding radius">
				<view class="flexleft">
					<view class="line2 margin_right1"></view>
					<view class="zytitlle">专业服务</view>
				</view>
				<view class="margin_top flexleft flex_wrap">
					<view class="flexcolumn" style="width: 25%;" v-for="item in zyfu" :key="item.id"
						@click="tzzyfw(item)">
						<view class="gjicon">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="smalltext textcenter margin_top2" style="color: #6e6547; font-weight: bold;">{{item.name}}</view>
					</view>
				</view>
			</view>
			<!-- 专业咨询 -->
			<view class="mainpadding radius margin_top ffffff">
				<view class="flexbetween" @click="tzzxzx">
					<view class="flexleft">
						<view class="line3 margin_right1"></view>
						<view class="zyzxtitile">专业咨询</view>
					</view>
					<view class="nostrongtext flexleft">查看更多<u-icon name="arrow-right" color="#333" size="12"></u-icon>
					</view>
				</view>
				<view class="flexbetween flex_wrap" v-if="is_login">
					<button open-type="contact" hover-class="none" v-for="item in zyzx_list" :key="item.id">
						<view class="wushi margin_top">
							<image :src="item.image_text" mode=""></image>
						</view>
					</button>
					<!-- <template v-if="userInfo.level==0">
						<button open-type="contact" hover-class="none" v-for="item in zyzx_list" :key="item.id">
							<view class="wushi margin_top">
								<image :src="item.image_text" mode=""></image>
							</view>
						</button>
					</template>
					<template v-if="userInfo.level==1">
						<view class="wushi margin_top" v-for="item in zyzx_list" :key="item.id" @click="zxClick(item)">
							<image :src="item.image_text" mode=""></image>
						</view>
					</template> -->
				</view>
				<view class="flexbetween flex_wrap" v-if="!is_login">
					<view class="wushi margin_top" v-for="item in zyzx_list" :key="item.id">
						<image :src="item.image_text" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 推荐律师 -->
			<view class="tuibox mainpadding radius margin_top ffffff">
				<view class="flexbetween" @click="tzckgd">
					<view class="flexleft">
						<view class="line4 margin_right1"></view>
						<view class="tjtitile">推荐律师</view>
					</view>
					<view class="nostrongtext flexleft">查看更多
						<u-icon name="arrow-right" color="#333" size="12"></u-icon>
					</view>
				</view>
				<view class="flexleft flex_wrap">
					<view class="flexcenter sanshi" v-for="item in lvshi_list" :key="item.id"
						@click="jumpurl('/pages/index/lvshixq?id=',item.id)">
						<view class="margin_top">
							<view class="shilitu">
								<image :src="item.logo_text" mode=""></image>
							</view>
							<view class="nosmalltext textcenter margin_top2">{{item.name}}<br>
								服务次数{{Number(item.base_fw_num)+Number(item.fw_num)}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 精选问答 -->
			<view class="ffffff mainpadding ffffff radius margin_top">
				<view class="flexleft">
					<view class="line1 margin_right1"></view>
					<view class="fltitlle">精选问答</view>
				</view>
				<view class="margin_top" v-for="item in jxwd_list" :key="item.id">
					<view class="flexleft">
						<view class="wenbtn margin_right1">问</view>
						<view class="nostrongtext">{{item.content}}</view>
					</view>
					<view class="margin_top fenbox mainpadding radius" v-for="(ite,index) in item.reply" :key="ite.id"
						v-if="!item.isload && (index==0||index==1||index==2||index==3||index==4)">
						<view class="smalltext">
							<view class="nostrongtext">{{ite.type==1?"律师：":"用户："}}{{ite.content}}</view>
						</view>
					</view>
					<view class="margin_top fenbox mainpadding radius" v-for="(ite,index) in item.reply" :key="ite.id"
						v-if="item.isload">
						<view class="smalltext">
							<view class="nostrongtext">{{ite.type==1?"律师：":"用户："}}{{ite.content}}</view>
						</view>
					</view>
					<view class="flexcenter nostrongtext margin_top" @click="lookall(item)" v-if="item.reply.length>5 && !item.isload">查看更多</view>
					<view class="flexcenter nostrongtext margin_top" @click="shouqiall(item)" v-if="item.isload">收起</view>
				</view>
			</view>
		</view>
		<u-popup :show="popshow" @close="popshow=false">
			<view class="mainpadding">
				<button open-type="contact" hover-class="none">
					<view class="mainpadding flexbetween">
						<view class="titletext">微信客服</view>
						<u-icon name="arrow-right" color="#999" size="20"></u-icon>
					</view>
				</button>
				<view class="mainpadding flexbetween" @click="wodefawu">
					<view class="titletext">我的法务</view>
					<u-icon name="arrow-right" color="#999" size="20"></u-icon>
				</view>
			</view>
		</u-popup>
		<huiyuansjpop :messageInfo="{hysjShow:hysjShow}" @hysjclose="hysjShow=false"></huiyuansjpop>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				userInfo: {},
				topimg: "",
				list1: [],
				bannerList: [],
				text1: [],
				newsData: [],
				cygj_list: [],
				fljtrec_data: [],
				zyfu: [],
				lvshi_list: [],
				zyzx_list: [],
				is_login: false,
				popshow: false,
				currentitem: {},
				jxwd_list: [],
				hysjShow:false,
			}
		},
		onLoad() {
			this.getbanner() //轮播
			this.getcygj() //常用工具
			this.getnews() //滚动消息
			this.getfljt() //法律讲堂
			this.getzyfu() //专业服务
			this.getzyzx() //专业咨询
			this.gettjls() //推荐律师
			this.getjxwd() //精选问答
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.init()
			}
		},
		onShareAppMessage: function(options) {
			return {
				title: '维瀚法律',
				imageUrl: '',
				path: '/pages/index/index'
			}
		},
		onShareTimeline: function() {
			return {
				title: '维瀚法律',
				imageUrl: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			lookall(item){
				item.isload = true
			},
			shouqiall(item){
				item.isload = false
			},
			getjxwd() {//精选问答
				httpRequest.request('/api/index/zyzxIndex', 'GET', {}).then(res => {
					res.data.forEach(item=>{
						this.$set(item,"isload",false)
					})
					this.jxwd_list = res.data
				})
			},
			wodefawu() {
				this.popshow = false
				uni.navigateTo({
					url: "/pages/wodefw/liuyandan?id=" + this.currentitem.id + "&name=" + this.currentitem.name
				})
			},
			zxClick(item) {
				this.currentitem = item
				this.popshow = true
			},
			init() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
				})
			},
			gettjls() { //推荐律师
				httpRequest.request('/api/index/shopIndex', 'GET', {
					page: 1,
					limit: 10000,
					is_rec: 2
				}, false, false, true).then(res => {
					this.lvshi_list = res.data.data
				})
			},
			getzyzx() { //专业咨询
				httpRequest.request('/api/index/zyzxTypeIndex', 'GET', {
					is_rec: 2
				}, false, false, true).then(res => {
					this.zyzx_list = res.data
				})
			},
			getzyfu() { //专业服务
				httpRequest.request('/api/index/zyfwTypeIndex', 'GET', {}, false, false, true).then(res => {
					this.zyfu = res.data
				})
			},
			getnews() { //滚动消息
				httpRequest.request('/api/index/noticeIndex', 'GET', {}, false, false, true).then(res => {
					let arr = []
					res.data.forEach(item => {
						arr.push(item.title)
					})
					this.text1 = arr
					this.newsData = res.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			enternews(index) {
				uni.navigateTo({
					url: "/pages/system/system?type=4&id=" + this.newsData[index].id
				})
			},
			getfljt() {
				httpRequest.request('/api/index/fljtIndex', 'GET', {}, false, false, true).then(res => {
					this.fljtrec_data = res.data.fljtrec_data
				})
			},
			getcygj() {
				httpRequest.request('/api/index/cygjIndex', 'GET', {
					Page: 1,
					limit: 4
				}, false, false, true).then(res => {
					this.cygj_list = res.data.data
				})
			},
			getbanner() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 4,
					is_more: 2
				}, false, false, true).then(res => {
					this.topimg = res.data.image_text
				})
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 5,
					is_more: 1
				}, false, false, true).then(res => {
					res.data.forEach(item => {
						this.list1.push(item.image_text)
					})
					this.bannerList = res.data
				})
			},
			lbtclick(index) {
				uni.navigateTo({
					url: this.bannerList[index].url
				})
			},
			jumpurl(url, id) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: url + id
				})
			},
			// 跳转法律文书
			tzflws() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/index/falvwenshu'
				})
			},
			// 跳转标准合同
			tzbzht() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/index/biaozhunht'
				})
			},
			// 跳转专业服务
			tzzyfw(item) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				// let data = {
				// 	child: item.child,
				// 	name: item.name
				// }
				// uni.navigateTo({
				// 	url: '/pages/index/zhuanyefuwu?data=' + encodeURIComponent(JSON.stringify(data))
				// })
				uni.navigateTo({
					url: '/pages/index/guizhangzd?id='+item.id+"&name="+item.name
				})
			},
			// 跳转在线咨询
			tzzxzx() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/index/zaixianzixun'
				})
			},
			// 跳转诉讼评估
			tzsspg() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateToMiniProgram({
					// appid  写你要跳转的小程序的 appid
					appId: 'wx80e6da82054bdb6b',
					// 路径写  src下的路径,假如你跳转的是pages下的页面,就可以写pages/index
					path: '/pages/index/index',
					extraData: {
					},
					// 这个不写的话会显示开发环境,不能正常跳转,写上就能正常跳转了
					envVersion: 'release',
					success(res) {
						console.log("跳转成功");
					},
					fail(err) {
						console.log("跳转不成功");
					}
				})
				return false
				uni.navigateTo({
					url: '/pages/index/susongpg'
				})
			},
			// 跳转法律计算
			tzfljs() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/index/falvjisuan'
				})
			},
			// 跳转法律法规
			tzflfg() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/index/falvfagui'
				})
			},
			// 跳转查看更多
			tzckgd() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/index/tuijianls'
				})
			},
			yizygy(item) {
				uni.navigateToMiniProgram({
					// appid  写你要跳转的小程序的 appid
					appId: item.wechat_appid,
					// 路径写  src下的路径,假如你跳转的是pages下的页面,就可以写pages/index
					path: item.wechat_path,
					extraData: {
						// 'type': 'out'
					},
					// 这个不写的话会显示开发环境,不能正常跳转,写上就能正常跳转了
					envVersion: 'release',
					success(res) {
						// 打开成功
						console.log("跳转成功");
						// uni.showToast({
						// 	title: '跳转成功'
						// })
					},
					fail(err) {
						// 打开失败/取消
						console.log("跳转不成功");
						// uni.showToast({
						// 	title: '跳转不成功'
						// })
					}
				})
			},
			// 跳转常用工具
			tzcygj() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/index/changygj'
				})
			},
			// 跳转法律讲堂
			tzfljt() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/index/falvjt'
				})
			},
			// 跳转详情
			trzxq(item) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				if(this.userInfo.level==0 && item.is_vip==2){
					this.hysjShow = true
					return false
				}
				uni.navigateTo({
					url: '/pages/index/pufajiangtxq?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.smalltext{
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #000000;
	}
	page {
		background: #F5F5F5;
	}

	.allneir {
		position: relative;
		top: -100rpx;
	}

	.fenbox {
		background-color: #FEF6F9;
	}

	.wenbtn {
		
		min-width: 42rpx;
		min-height: 41rpx;
		width: 42rpx;
		height: 41rpx;
		background-color: #BA8A00;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #ffffff;
	}

	.sanshi {
		width: 33.33%;
	}

	.shilitu {
		width: 181rpx;
		height: 181rpx;
		border-radius: 50%;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.line4 {
		width: 8rpx;
		height: 28rpx;
		background-color: #FAAD17;
	}

	.tjtitile {
		font-size: 34rpx;
		font-family: AlibabaPuHuiTi;
		font-weight: bold;
		color: #FBAE17;
	}

	.tuibox {
		background-color: #FFF2E6;
	}

	.wushi {
		width: 302rpx;
		height: 173rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.zyzxtitile {
		font-size: 34rpx;
		font-family: AlibabaPuHuiTi;
		font-weight: bold;
		color: #6D6D6F;
	}

	.line3 {
		width: 8rpx;
		height: 28rpx;
		background-color: #6D6D6F;
	}

	.zyicon {
		margin: auto;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.zytitlle {
		font-size: 34rpx;
		font-family: AlibabaPuHuiTi;
		font-weight: bold;
		color: #ffffff;
	}

	.zybox {
		background-color: #a8986e;
	}

	.flimg {
		width: 138rpx;
		height: 201rpx;
		border-radius: 15rpx 15rpx 15rpx 15rpx;

		image {
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			width: 100%;
			height: 100%;
		}
	}

	.ershiw {
		width: 25%;
	}

	.gjicon {
		margin: auto;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.fltitlle {
		font-size: 34rpx;
		font-family: AlibabaPuHuiTi;
		font-weight: bold;
		color: #333333;
	}

	.sytitlle {
		font-size: 34rpx;
		font-family: AlibabaPuHuiTi;
		font-weight: bold;
		color: #CB9B0C;
	}

	.line2 {
		width: 8rpx;
		height: 28rpx;
		background-color: #fff;
	}

	.line1 {
		width: 8rpx;
		height: 28rpx;
		background-color: #333333;
	}

	.line {
		width: 8rpx;
		height: 28rpx;
		background-color: #CB9B0C;
	}

	.cygjbox {
		background-color: #F8F5EB;
	}

	.gongicon {
		width: 44.36rpx;
		height: 38.97rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.banner1 {
		width: 100%;
		height: 285.37rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.flicon {
		margin: auto;
		width: 140rpx;
		height: 140rpx;
		border: 6rpx solid #CB9B0C;
		border-radius: 50%;
		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.banner {
		width: 100%;
		height: 630rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>